<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="css/common.css" rel="stylesheet" type="text/css"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link href="css/user_style.css" rel="stylesheet" type="text/css"/>
    <link href="skins/all.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>

    <script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="js/common_js.js" type="text/javascript"></script>
    <script src="js/footer.js" type="text/javascript"></script>
    <script src="layer/layer.js" type="text/javascript"></script>
    <!--    <script src="js/iCheck.js" type="text/javascript"></script>-->
    <script src="js/custom.js" type="text/javascript"></script>

    <!--导入vue 包-->
    <script src="vue/Vue.v2.6.12.js"></script>
    <script src="js/jquery-form.js"></script>
    <!--自定义工具-->
    <script src="js/HttpUtil.js"></script>
    <!--判断是否登录-->
    <!--<script type="text/javascript" src="js/admin.check.login.js"></script>-->
    <title>用户信息</title>

    <style type="text/css">
        .formUpload0{
            -web-kit-appearance:none;
            -moz-appearance: none;
            font-size:1.4em;
            height:1.8em;
            border-radius:4px;
            border:1px solid #c8cccf;
            outline:0;
            margin-top: 10px;
        }
        .formUpload{
            -web-kit-appearance:none;
            -moz-appearance: none;
            font-size:1.5em;
            text-align: center;
            height:1.8em;
            width: 5.0em;
            border-radius:4px;
            background-color: #4F4F4F;
            border:1px solid #c8cccf;
            color: white;
            outline:0;
            margin-top: 10px;
            margin-left: 50px;
        }
    </style>

</head>


<body>
<head>
    <div id="header_top">
        <div id="top">
            <div class="Inside_pages">
                <div class="Collection"><a href="login.html" class="green">请登录</a> <a href="register.html"
                                                                                      class="green">免费注册</a></div>
                <div class="hd_top_manu clearfix">
                    <ul class="clearfix">
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="user_center.html">用户中心</a></li>
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="message_center.html">消息中心</a></li>
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="goodsList.html">商品分类</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="header" class="header page_style">
            <div class="logo"><a href="index.html"><img src="images/logo.png"/></a></div>

            <!--结束图层-->
            <div class="Search">
                <div class="search_list">
                    <ul>
                        <li class="current"><a href="#">产品</a></li>
                        <li><a href="#">信息</a></li>
                    </ul>
                </div>
                <div class="clear search_cur">
                    <input name="searchName" id="searchName" class="search_box" onkeydown="keyDownSearch()" type="text">
                    <input name="" type="submit" value="搜 索" class="Search_btn"/>
                </div>
                <div class="clear hotword">热门搜索词：香醋&nbsp;&nbsp;&nbsp;茶叶&nbsp;&nbsp;&nbsp;草莓&nbsp;&nbsp;&nbsp;葡萄&nbsp;&nbsp;&nbsp;菜油</div>
            </div>

            <!--购物车样式-->
            <div class="hd_Shopping_list" id="Shopping_list">
                <div class="s_cart"><a href="购物车.html">我的购物车</a> <i class="ci-right">&gt;</i><i class="ci-count"
                                                                                                id="shopping-amount">0</i>
                </div>
                <div class="dorpdown-layer">
                    <div class="spacer"></div>
                    <!--<div class="prompt"></div><div class="nogoods"><b></b>购物车中还没有商品，赶紧选购吧！</div>-->
                    <ul class="p_s_list">
                        <li>
                            <!-- <div class="img"><img src="images/tianma.png"></div>-->
                            <div class="content"><p class="name"><a href="#">产品名称</a></p>
                                <p>颜色分类:紫花8255尺码:XL</p></div>
                            <div class="Operations">
                                <p class="Price">￥55.00</p>
                                <p><a href="#">删除</a></p></div>
                        </li>
                    </ul>
                    <div class="Shopping_style">
                        <div class="p-total">共<b>1</b>件商品　共计<strong>￥ 515.00</strong></div>
                        <a href="Shop_cart.html" title="去购物车结算" id="btn-payforgoods" class="Shopping">去购物车结算</a>
                    </div>
                </div>
            </div>
        </div>

        <!--菜单栏-->
        <div class="Navigation" id="Navigation" style="padding-left: 420px;">
            <ul class="Navigation_name">
                <li><a href="index.html">首页</a></li>
                <li class="hour"><a href="半小时圈主页.html">半小时生活圈</a></li>
                <li><a href="产品-产品列表(预售).html">预售专区</a><em class="hot_icon"></em></li>
                <li><a href="店铺首页.html">好评商户</a></li>
                <li><a href="goodsList.html">热销活动</a></li>
                <li><a href="">联系我们</a></li>
            </ul>
        </div>
        <script>$("#Navigation").slide({titCell: ".Navigation_name li", trigger: "click"});</script>
    </div>
</head>
<!--用户中心样式-->
<div id="my_vue" class="user_style clearfix">

        <div class="user_center clearfix">
            <!--左侧样式-->
            <div class="left_style">
                <div class="menu_style">
                    <div class="user_title"><a href="user_information.html">用户中心</a></div>
                    <div class="user_Head">
                        <div class="user_portrait">
                            <a href="#" title="修改头像" class="btn_link"></a>
                            <img :src="userImg" width="180px"/>
                            <div class="background_img"></div>
                        </div>
                        <div class="user_name">
                            <p><span class="name">{{userName}}</span></p>
                            <!--</span><a href="update_password.html">[修改密码]</a>
                            <p>访问时间：2016-1-21 10:23</p>-->
                            <p>-------</p>
                        </div>
                    </div>
                    <!--菜单列表图层-->
                    <div class="sideMen">
                        <dl class="accountSideOption1">
                            <dt class="transaction_manage"><em class="icon_1"></em>订单管理</dt>
                            <dd>
                                <ul>
                                    <li><a href="user_order.html">我的订单</a></li>
                                    <li><a href="address.html">收货地址</a></li>
                                </ul>
                            </dd>
                        </dl>
                        <dl class="accountSideOption1">
                            <dt class="transaction_manage"><em class="icon_2"></em>会员管理</dt>
                            <dd>
                                <ul>
                                    <li><a href="#">用户信息</a></li>
                                    <li><a href="#">我的收藏</a></li>
                                    <li><a href="#">我的留言</a></li>
                                    <li><a href="#">我的评论</a></li>
                                </ul>
                            </dd>
                        </dl>
                        <dl class="accountSideOption1">
                            <dt class="transaction_manage"><em class="icon_3"></em>账户管理</dt>
                            <dd>
                                <ul>
                                    <li><a href="update_password.html">修改密码</a></li>
                                    <li><a href="user_account_management.html">账户余额</a></li>
                                    <li><a href="用户中心-消费记录.html">消费记录</a></li>
                                    <li><a href="#">跟踪包裹</a></li>
                                    <li><a href="#">资金管理</a></li>
                                </ul>
                            </dd>
                        </dl>
                    </div>
                    <script>jQuery(".sideMen").slide({
                        titCell: "dt", targetCell: "dd", trigger: "click"
                        , defaultIndex: 0, effect: "slideDown", delayTime: 300, returnDefault: true
                    });</script>
                </div>
            </div>
            <!--右侧样式-->
            <div class="right_style">
                <!--消费记录样式-->
                <div class="user_address_style">
                    <div class="title_style"><em></em>用户信息</div>
                    <!--用户信息样式-->
                    <!--个人信息-->
                    <div class="Personal_info" id="Personal">
                        <ul class="xinxi">
                            <li><label>用户名：</label><input v-model="userName" value="" placeholder="userName"
                                                          class="text" disabled="disabled">
                            </li>
                            <li><label>用户性别：</label> <span class="sex">{{userSex}}</span>
                                <div class="add_sex">
                                    <input type="radio" name="sex" value="保密" v-model="userSex">
                                    保密&nbsp;&nbsp;
                                    <input type="radio" name="sex" value="男" v-model="userSex">
                                    男&nbsp;&nbsp;
                                    <input type="radio" name="sex" value="女" v-model="userSex">
                                    女&nbsp;&nbsp;
                                </div>
                                <!--                            userSex:{{userSex}}-->
                            </li>
                            <li><label>电子邮箱：</label><input v-model="userEmail" placeholder="userEmail" class="text"
                                                           disabled="disabled">
                            </li>
                            <li><label>手机号：</label><input v-model="userPhone" placeholder="userPhone" class="text"
                                                          disabled="disabled">
                            </li>
                            <li><label>密码：</label><input v-model="userPassword" placeholder="userPassword" class="text"
                                                          disabled="disabled">
                            </li>
                            <li><label>积分：</label> <span>{{userList.integral}}</span></li>
                            <li><label>余额：</label> <span>{{userList.balance}}</span></li>
                            <li><label>注册时间：</label> <span>{{userList.createTime}}</span></li>
                            <div class="bottom">
                                <input name="" type="submit" value="修改信息" class="modify"/>

                                <input name="" type="submit" v-on:click="saveUserInformation()" value="确认修改"
                                       class="confirm"/>

                                <!--<input name="" type="button" v-on:click="saveAddress()" value="保存" class="add_dzbtn"/>-->
                            </div>
                        </ul>
                        <form  action="http://localhost:80//user_api/userInformation/upload"
                               id="imgForm"
                               enctype="multipart/form-data"  @submit.prevent="saveReport();" method="post">
                        <ul class="Head_portrait">

                            <!-- 文件选择框 默认关闭 点击图片后调出 -->
<!--                            <input type="file" name="currImg" id="currImg" style="display: none;"/>-->
                            <div>
                            <!-- 把图片当作按钮，点击后调出文件选择框 -->
                            <img id="imgBtn" v-on:click="btnImg()" :src="userImg" width="180px"/>

                            <!--文件选择框-->
                                <div>
                            <input id="currImg" type="file" name="file" class="formUpload0" style="display: none;"/>
                            <input type="submit" name="submit" value="上传" class="formUpload"/>
<!--                            <input name="" type ="button" value="确认" class="formUpload"/>&lt;!&ndash;v-on:click="uploudImg()"&ndash;&gt;-->
                            </div>
                            </div>
                        </ul>
                        </form>
                    </div>
                </div>
            </div>
        </div>
</div>

<div class="fri-link-bg clearfix">
    <div class="fri-link">
        <div class="logo left margin-r20"><img src="images/fo-logo.jpg" width="152" height="81"/></div>
        <div class="left"><img src="images/qd.jpg" width="90" height="90"/>
            <p>扫描下载APP</p>
        </div>
        <div class="">
            <dl>
                <dt>新手上路</dt>
                <dd><a href="#">售后流程</a></dd>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">订购方式</a></dd>
                <dd><a href="#">隐私声明 </a></dd>
                <dd><a href="#">推荐分享说明 </a></dd>
            </dl>
            <dl>
                <dt>配送与支付</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>售后保障</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>支付方式</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
        </div>
    </div>
</div>
<!--网站地图END-->

</body>
</html>


<script>
    let vm = new Vue({

        el: '#my_vue',

        data: {
            //信息lsit
            userList: "",
            //用户名
            userName: "",
            //电子邮箱
            userEmail: "",
            //性别
            userSex: "",
            //手机号码
            userPhone: "",
            //密码
            userPassword:"",
            //积分
            integral: "",
            //余额
            balance: "",
            //注册时间
            createTime: "",
            //头像地址
            userImg:"",

            userImgTem:"",
        },
        methods: {

            //展示
            UserInformation: function () {
                let url = "/userInformation/findUserById.do";
                var cookie = getCookie("userMassage");
                var parse = JSON.parse(cookie);
                var userId = parse.userID;
                console.log(userId);
                let This = this;
                console.log("展示图片："+This.userImg);

                postWithJson(url, userId, function (data) {
                    This.userList = data;
                    This.userName = data.userName;
                    This.userPassword = data.password;
                    This.userSex = data.userSex;
                    This.userEmail = data.email;
                    This.userPhone = data.phoneNumber;
                    if (data.userImg ==null){
                        This.userImg ="images/people.png"
                        console.log("展示图片："+This.userImg);
                    }else {
                        This.userImg ="http://localhost:80/merchant_api/imgDo/fileDownload?id="+ data.userImg;
                    }

                    console.log(This.userList)
                })
            },
            //修改
            saveUserInformation: function () {
                let url = "/userInformation/updataUser.do";
                let This = this;
                var cookie = getCookie("userMassage");
                var parse = JSON.parse(cookie);
                var userId = parse.userID;
                let params = {
                    userId,
                    userName: this.userName,
                    userSex: this.userSex,
                    email: this.userEmail,
                    phoneNumber: this.userPhone,
                    password:this.userPassword,
                }
                postWithParams(url, params, function (data) {
                    This.userList = data;
                })
                location.reload();  /*需要location.reload()的原因，修改后，不知道如何回到之前状态，所以需要刷新页面*/
            },

            saveReport: function () {
                let This = this;
                // jquery 表单提交\

                layer.msg("正在上传-------");
                $("#imgForm").ajaxSubmit(function (message) {
                    // 对于表单提交成功后处理，message为提交页面saveReport.htm的返回内容
                    This.userImgTem =message;
                    layer.msg("上传成功");
                    console.log("提交后"+This.userImgTem)
                    This.uploudImg();
                });
                return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
            },

            //图片回显
            btnImg:function(){
                //图片被点击后拉起文件选择框
                /*$('#imgBtn').unbind("click").click(function(){
                    $('#currImg').click();
                })*/
                $("#imgBtn").on("click",function(){
                    $('#currImg').click();
                    alert(count++);
                });
                //选取文件后回显当前显示图片
                $('#currImg').change(function(e){
                    //当前选择的文件
                    var currImg = e.target.files[0];
                    //生成一个图片路径(使用URL.createObjectURL将选择的图片生成一个路径)
                    var imgSrc = URL.createObjectURL(currImg);
                    //更换原图片路径，回显图片
                    $('#imgBtn').attr('src',imgSrc);
                });
            },

            //图片存储
            uploudImg: function () {

                let url = "/userInformation/uploudImg.do"

                let This = this;
                var cookie = getCookie("userMassage");
                var parse = JSON.parse(cookie);
                var userId = parse.userID;

                console.log("获取图片存储"+This.userImgTem)

                let params = {
                    userId, userImg: this.userImgTem
                }
                postWithParams(url, params, function (data) {
                    console.log("获取存储返回："+data)
                })
                location.reload();
            },

        },
        mounted: function () {
            this.UserInformation();
        }
    });
</script>